🤖 perf: rewrite shimmer with pure CSS (no JS animation) #998
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Codex usage limits have been reached for code reviews. Please check with the admins of this repo to increase the limits by adding credits. |
ammar-agent
force-pushed
the
fix-shimmer-frame-drops-thinking
branch
5 times, most recently
from
fa69834 to
edb1a0d
Compare
ammar-agent
changed the title
ammar-agent
force-pushed
the
fix-shimmer-frame-drops-thinking
branch
from
edb1a0d to
98853d2
Compare
Replace canvas + Web Worker approach with pure CSS: - Base text layer (muted color) provides layout - Highlight text layer slides via transform: translateX - Gradient mask reveals highlight band as it passes Transform animations run entirely on the compositor thread (GPU). Zero main thread involvement, zero JS, zero requestAnimationFrame. Previous approaches all had main thread overhead: - motion/react: backgroundPosition triggers repaints - Web Worker + OffscreenCanvas: compositing still hits main thread - CSS background-position: also triggers repaints Only transform/opacity/filter are truly compositor-only.
ammar-agent
force-pushed
the
fix-shimmer-frame-drops-thinking
branch
from
98853d2 to
228de26
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Problem
The previous shimmer implementation using Web Worker + OffscreenCanvas still showed 16% CPU usage on the main thread. Even though the animation loop ran in a worker, canvas compositing still hits the main thread.
Solution
Replace with pure CSS using
background-clip: text:color-mix) sweeps acrossbackground-position- no JS involvedWhy this is better
Trade-off
background-positionisn't compositor-only so it does trigger repaints, but for small text elements like "Thinking..." this is negligible compared to the canvas/worker overhead.Files changed
src/browser/components/ai-elements/shimmer.tsx- Pure CSS implementationsrc/browser/styles/globals.css- Added.shimmer-textclass and keyframesrc/browser/workers/shimmerWorker.ts- No longer neededGenerated with
mux